<template>
  <div>
    <div class="main">
      <div class="same">
        <div class="userImg" @click="$router.push('/')">
          <img src="https://i.loli.net/2021/12/02/WuyTjaGcdX2YEHU.png" alt="" />

          <img
            class="motianlun"
            src="https://i.loli.net/2021/12/02/NwvtVzoF7rRLiMG.png"
            alt=""
          />
        </div>
        <div class="Enroll">
          <van-form @submit="onSubmit">
            <van-field
              v-model="username"
              name="phone"
              label="手机号"
              placeholder="手机号"
              :rules="[
                {
                  pattern: pattern_phone,
                  required: true,
                  message: '请填写正确的手机号',
                },
              ]"
            />
            <van-field
              v-model="nickname"
              name="nickname"
              label="昵称"
              placeholder="请输入昵称"
              :rules="[{ required: true, message: '请填写昵称' }]"
            />
            <van-field
              v-model="password"
              type="password"
              name="password"
              label="密码"
              placeholder="密码"
              :rules="[
                {
                  pattern: pattern_password,
                  required: true,
                  message:
                    '密码错误,最少6位，至少1个大写字母，1个数字，1个特殊字符。例:Admin@123',
                },
              ]"
            /><van-field
              v-model="password1"
              type="password"
              name="password1"
              label="确认密码"
              placeholder="确认密码"
              :rules="[
                { validator, required: true, message: '两次密码不一致' },
              ]"
            />
            <van-field name="sex" label="性别">
              <template #input>
                <van-radio-group v-model="sex" direction="horizontal">
                  <van-radio name="男">男</van-radio>
                  <van-radio name="女">女</van-radio>
                </van-radio-group>
              </template>
            </van-field>

            <div style="margin: 16px">
              <van-button round block type="info" native-type="submit"
                >注册
                <img
                  src="https://i.loli.net/2021/12/02/3kG1JOXqu49ZfLe.png"
                  alt=""
              /></van-button>
            </div>
          </van-form>
        </div>
        <div class="foorter">
          <img src="https://i.loli.net/2021/12/02/LHp5DTIAGVXEjPv.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { regist, img } from "@/api";
import axios from "axios";
import { Toast } from "vant";
export default {
  components: {},
  data() {
    return {
      fileList: [], //默认是一个空数组
      imageData: {},

      sex: "男",
      username: "",
      nickname: "",
      password: "",
      password1: "",

      pattern_phone: /^1[3-9]\d{9}$/,
      pattern_password:
        /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[!@#$%^&*./?+-]).*$/,
      uploader: [
        {
          url: "https://tse1-mm.cn.bing.net/th/id/R-C.2ef794f96f679089ebb01f4ce6b2da87?rik=1Dqp8juCKh3rKw&riu=http%3a%2f%2fimg.ewebweb.com%2fuploads%2f20200303%2f18%2f1583232918-ilkpCfSLwK.jpeg&ehk=L8EDSWDAtKMlaIKW4ET9sSlFxqRTtGd9HmzNYqM52kw%3d&risl=&pid=ImgRaw&r=0",
        },
      ],
    };
  },
  methods: {
    onSubmit(values) {
      // console.log(values.File[0].file);
      let user = {
        phone: values.phone,
        password: values.password1,
        nickname: values.nickname,
        sex: values.sex,
      };

      regist(user).then((res) => {
        console.log(res);
        if (res.data.code === 10000) {
          this.$router.push("/login");
          Toast("注册成功");
        } else {
          Toast("注册失败");
        }
      });
    },

    validator(val) {
      if (this.password === val) {
        return true;
      } else {
        return false;
      }
    },
  },
};
</script>
<style scoped lang="scss">
.main {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-image: linear-gradient(to top, #fddb92 0%, #d1fdff 100%);

  background-size: 100% 100%;
  opacity: 0.8;
  .userImg {
    width: 100%;
    height: 28vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    img {
      border-radius: 50%;
      height: 30vh;
    }

    .motianlun {
      overflow: hidden;
      position: absolute;

      height: 5vh;
      display: block;
      right: 95px;
      top: 21px;
      z-index: -1;
      transform-origin: center 50%;
      animation: rotation 30s linear infinite;
    }
  }
  .Enroll {
    width: 100%;
    height: 35vh;

    .van-cell {
      background: rgba(255, 255, 255, 0.397);
      background: none;
      border-bottom: 1px solid #ccc;
    }

    .van-button {
      position: relative;
      margin-top: 10vh;
      overflow: hidden;
      img {
        right: 0;
        top: 5px;
        height: 6vh;
        position: absolute;
      }
    }
    .van-button--block {
      background: #e94f25;
      border: 0;
    }
  }
  .foorter {
    width: 100%;
    img {
      margin-top: 6vh;
      width: 100%;
    }
  }
}

@keyframes rotation {
  100% {
    transform: rotate(360deg);
  }
}
</style>
